<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./common/animate.css">
    <style>
    body { margin: 0; padding: 0;}

    .local-info { padding: 10px 20px; position: fixed; top: 0; width: 100%; z-index: 999; background: #cccccc; box-sizing: border-box; }
    .refresh-btn { position: absolute; top: 10px; right: 30px;}
    pre { outline: 1px solid #aaaaaa; padding: 5px; margin: 5px; }
    .string { color: green; }
    .number { color: darkorange; }
    .boolean { color: blue; }
    .null { color: magenta; }
    .key { color: red; }
    .download-list { margin: 10px; }
    button { background-color: #428bca; border-color: #357ebd; color: #fff; text-align: center; vertical-align: middle; cursor: pointer;}
    .pause-btn { background-color: #FF9900;}
    .delete-btn { background-color: #FF1212; }

    .bottom { margin: 10px; }
    .add-btn {font-size: 18px;}

    .new-download-dialog {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        padding: 20px;
        background-color: #fff9e0;
        box-shadow: 1px 1px 1px #888888;
    }
    .new-download-dialog .close-btn {
        background-color: #FF1212;
        position: absolute;
        top: 20px;
        right: 20px;
    }
    </style>
    <title>WebBT Torrent Test</title>
</head>
<body style="padding-top: 65px;">
    <div class="local-info">
        <div>PeerId: <span id="peer_id">??????????????</span></div>
        <div class="top-tip">初始化中...</div>
        <button class="refresh-btn" onclick="refresh();">刷新页面</button>
    </div>

    <table class="download-list" border="1">
        <caption>下载列表</caption>
        <tr>
            <th>文件名称</th>
            <th>大小</th>
            <th>下载速度</th>
            <th>下载</th>
            <th>上传速度</th>
            <th>上传</th>
            <th>进度</th>
            <th>操作</th>
        </tr>
    </table>
    <div class="bottom">
        <button class="add-btn" onclick="openNewDownloadDialog()">添加下载</button>
    </div>

    <script src="./common/inner_services.js"></script>
    <script src="./common/util.js"></script>
    <script src="./main.js"></script>
</body>
</html>
